<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="/static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
    <script src="/static/js/china.js" th:src="@{js/map/china.js}"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>湖北内外疫情情况</title>
    <!-- Bootstrap core CSS -->
    <link href="asserts/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="asserts/css/dashboard.css" th:href="@{/css/dashboard.css}" rel="stylesheet">
</head>

<body>

<!--引入topbar-->
<div th:replace="~{commons/bar::topbar}"></div>
<div class="container-fluid">
    <div class="row">
        <!--引入sidebar-->
        <div th:replace="~{commons/bar::#sidebar(activeUri='outhubei')}"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

            <div style="width: 1218px; height: 700px">

            <div style="width: 1218px; height: 400px">
                <div id="container7" style="width: 50%; height: 300px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container7'));
                    var base = +new Date(2020, 2, 0);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];

                    var data =
                        [1, 2, 3, 20, 36, 60, 63, 67, 69, 79, 85, 88, 95, 111, 123, 143, 155, 189, 228, 269, 314, 353, 427, 474, 541, 595];
                    for (var i = 1; i < 27; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }
                    option = {
                        title: {
                            text: '湖北内外-病死率趋势图',
                            top: '5%'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['湖北病死率', '湖北以外地区病死率'],
                            top: '5%',
                            right: '10%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            data: [0, 2, 4, 6],
                            axisLabel: {
                                show: true,
                                formatter: '{value} %'
                            },
                            show: true
                        },
                        series: [
                            {
                                name: '湖北病死率',
                                type: 'line',
                                stack: '湖北病死率',
                                data: [4.18, 4.22, 4.26, 4.3, 4.34, 4.37,
                                    4.41, 4.44, 4.46, 4.49, 4.51, 4.52, 4.54, 4.55, 4.57, 4.59, 4.6, 4.62, 4.62, 4.63, 4.64, 4.65, 4.66, 4.67, 4.67, 4.68]
                            },
                            {
                                name: '湖北以外地区病死率',
                                type: 'line',
                                stack: '湖北以外地区病死率',
                                data: [0.86, 0.86, 0.86, 0.86, 0.87, 0.87,
                                    0.87, 0.88, 0.88, 0.88, 0.89, 0.89, 0.9, 0.9, 0.9, 0.9, 0.9, 0.89, 0.9, 0.9, 0.9, 0.89, 0.88, 0.88, 0.88, 0.87]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div id="container8" style="width: 50%; height: 300px; float: right"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container8'));
                    var base = +new Date(2020, 2, 0);
                    var oneDay = 24 * 3600 * 1000;
                    var date = [];

                    var data =
                        [1, 2, 3, 20, 36, 60, 63, 67, 69, 79, 85, 88, 95, 111, 123, 143, 155, 189, 228, 269, 314, 353, 427, 474, 541, 595];
                    for (var i = 1; i < 27; i++) {
                        var now = new Date(base += oneDay);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }
                    option = {
                        title: {
                            text: '湖北内外-治愈率趋势图',
                            top: '5%'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['湖北治愈率', '湖北以外地区治愈率'],
                            top: '5%',
                            right: '10%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                formatter: '{value} %'
                            },
                            show: true,
                            max: 100,//设置最大值
                            min: 0,//设置最小值
                            interval: 20,//设置刻度间距
                        },
                        series: [
                            {
                                name: '湖北治愈率',
                                type: 'line',
                                stack: '湖北治愈率',
                                data: [50.31, 53.81, 57.26, 60, 62.09, 64.24, 66.48,
                                    68.54, 70.23, 72.38, 74.21, 76.05, 78.1, 80.06, 81.26, 82.58, 83.9, 85.07, 86.11, 86.94, 87.66, 88.32, 88.97, 89.69, 90.27, 91.05]
                            },
                            {
                                name: '湖北以外地区治愈率',
                                type: 'line',
                                stack: '湖北以外地区治愈率',
                                data: [82.33, 84.78, 86.77, 88.79, 90.16, 91.34,
                                    92.24, 93.09, 94.17, 94.91, 95.38, 95.81, 96.03, 96.15, 96.16, 96.21, 96.19, 95.79, 95.58, 94.99, 94.54, 93.93, 93.04, 92.42, 91.78, 91.1]
                            }
                        ]
                    };
                    myChart.setOption(option)
                </script>

                <div style="width: 50%; height: 100px; float: left; text-align: center">
                    <table class="table table-hover table-bordered  table-sm"
                           style="text-align:center;width: 500px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                湖北内外-病死率趋势图分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>湖北地区</td>
                            <td>病死率一直在4%-5%之前,并有小幅的上升趋势</td>
                        </tr>
                        <tr>
                            <td>湖北外地区</td>
                            <td>病死率一直在0%-1%之前,呈平稳状态</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div style="width: 50%; height: 100px; float: right; text-align: center">
                    <table class="table table-hover table-bordered  table-sm"
                           style="text-align:center;width: 500px; margin: auto">
                        <thead>
                        <tr>
                            <th colspan="4">
                                湖北内外-治愈率趋势图分析
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>湖北地区</td>
                            <td>治愈率呈上升趋势,最后与其他地区的相交</td>
                        </tr>
                        <tr>
                            <td>湖北外地区</td>
                            <td>治愈率在3/1到3/16期间上升,并达到顶点,在3/16日之后逐渐下降</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div style="width: 1218px; height: 500px">
                <div id="container6" style="width: 100%; height: 500px; float: left"></div>
                <script>
                    var myChart = echarts.init(document.querySelector('#container6'));
                    var data1 = [{
                        name: '其他地区',
                        value: 14277
                    }, {
                        name: '湖北地区',
                        value: 67801
                    }];

                    var data2 = [{
                        name: '其他地区',
                        value: 13006
                    }, {
                        name: '湖北地区',
                        value: 61731
                    }];

                    var data3 = [{
                        name: '其他地区',
                        value: 124
                    }, {
                        name: '湖北地区',
                        value: 3174
                    }];

                    option = {
                        legend: {
                            top: "20%"
                        },
                        tooltip: {},
                        title: [{
                            text: '湖北内外疫情占比分析',
                            left: 'center',
                            top: '10%'
                        }, {
                            subtext: '累计确诊数',
                            left: '16.67%',
                            top: '75%',
                            textAlign: 'center'
                        }, {
                            subtext: '累计治愈数',
                            left: '50%',
                            top: '75%',
                            textAlign: 'center'
                        }, {
                            subtext: '累计死亡数',
                            left: '83.33%',
                            top: '75%',
                            textAlign: 'center'
                        }],
                        series: [{
                            type: 'pie',
                            radius: '45%',
                            center: ['50%', '50%'],
                            data: data1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine: {show: true}
                                }
                            },
                            animation: false,
                            label: {
                                position: 'outer',
                                alignTo: 'none',
                                bleedMargin: 5
                            },
                            left: 0,
                            right: '66.6667%',
                            top: 0,
                            bottom: 0
                        }, {
                            type: 'pie',
                            radius: '45%',
                            center: ['50%', '50%'],
                            data: data2,
                            animation: false,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine: {show: true}
                                }
                            },
                            label: {
                                position: 'outer',
                                alignTo: 'labelLine',
                                bleedMargin: 5
                            },
                            left: '33.3333%',
                            right: '33.3333%',
                            top: 0,
                            bottom: 0
                        }, {
                            type: 'pie',
                            radius: '45%',
                            center: ['50%', '50%'],
                            data: data3,
                            animation: false,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine: {show: true}
                                }
                            },
                            label: {
                                position: 'outer',
                                alignTo: 'edge',
                                margin: 20
                            },
                            left: '66.6667%',
                            right: 0,
                            top: 0,
                            bottom: 0
                        }]
                    };
                    myChart.setOption(option)
                </script>
            </div>
        </main>
    </div>
</div>
</body>
</html>






